<template>
  <div>
    <div id="mainf">
    </div>
    <p style="font-size:0.4rem;">force03</p>
  </div>

</template>

<script>
  export default{
    props:['datam'],
    data(){
      return{
        tabledata:[],
        tabledataya:[],//x轴参数
        tabledatayc:[],//y轴参数
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datam;
        let ag=that.tabledata;
        console.log(that.tabledata)
        that.tabledataya=[];//这是x轴数据,例:“22：00”
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%

        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].yb)//这是x轴数据
          that.tabledatayc.push(ag[i].ya)//这是y轴显示百分比的地方
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mainf'),null, {renderer: 'svg'});

         // 绘制图表
         var data = this.tabledatayc;
         var titlename = this.tabledataya;


         var option = {
            backgroundColor: '#0f2e6f',
                grid: {
                  left: this.remToPx(0.6),
                  top: '12%',
                  right: this.remToPx(0.6),
                  bottom: '8%',
                  containLabel: true,

                 },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: titlename,
                    axisLabel: {
                        textStyle: {
                          color:'#5c79b5',
                          fontSize:this.remToPx(0.28),
                        },
                        margin:this.remToPx(0.15),
                    },
                    axisLine:{
                      lineStyle:{
                        color:"#000000",
                      }
                    },
                    // axisTick:{
                    //   alignWithLabel :true,
                    // },
                    triggerEvent:false,
                },
                yAxis: [{
                    show:true,
                    type:'value',
                    position :'right',
                    offset:this.remToPx(0.2),//偏移量
                    axisLine :{
                      show:false,
                      lineStyle:{
                        color:'#6b84b0',
                      },

                    },
                    splitLine:{//是否现实y轴分割线
                      show:false,
                    },
                    axisLabel:{
                      margin :this.remToPx(0.3),
                    },
                    triggerEvent:false,

                }],
                series: [{
                    name: '渐变线框',
                    type: 'line',
                    smooth: true,
                    data: data,
                    connectNulls :true,//是否连接空数据
                    symbol: 'circle',
                    symbolSize: this.remToPx(0.05),
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width:this.remToPx(0.03),
                        }
                    },
                    areaStyle: {
                      data: data,
                      normal: {
                          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                              offset: 0,
                                              color: 'rgba(0,151,153, 0.9)'
                                          }, {
                                              offset: 0.8,
                                              color: 'rgba(22,62,129, 0.2)'
                                          }], false),
                          shadowColor: 'rgba(0, 0, 0, 0.1)',
                          shadowBlur: this.remToPx(0.3),
                      }
                    },
                    lineStyle: {
                     width:this.remToPx(0.06),// 0.3的线条是非常细的了
                     color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                         offset: 0,
                         color: '#d0de0c'
                     }, {
                         offset: 1,
                         color: '#83eb38'
                     }]),
                    },

                }, ]
          };



         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
  #mainf{
    width:100%;height:4rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
